<template>
  <view class="page page-grey has-fixed-footer page-activity-goods">
    <view class="page-content">
      <view class="goods-list">
        <view class="goods-item" v-for="item in goodsList" :key="item.id">
          <image :src="item.imgUrl" style="width: 164rpx; height: 164rpx; border-radius: 16rpx; overflow: hidden;" mode=""></image>
          <view class="goods-item-right">
            <view class="right-title">{{item.name}}</view>
            <view class="right-list">
              <view class="right-text">
                <image src="/static/images/icon-kc.png" style="width: 22rpx; height: 22rpx;"></image>
                库存 <span class="right-number">{{item.stock}}</span><span>{{item.unit}}</span>
              </view>
              <view class="right-text">
                <image src="/static/images/iocn-dj.png" style="width: 26rpx; height: 26rpx;"></image>
                单价 <span class="right-number">{{ utils.moneyFormatter(item.price / 100)}}</span><span>元/{{item.unit}}</span>
              </view>
              <view class="right-text">
                <image src="/static/images/icon-qssl.png" style="width: 24rpx; height: 22rpx;"></image>
                起售数量 <span class="right-number">{{item.startNum}}</span><span>{{item.unit}}</span>
              </view>
            </view>
          </view>
          <fui-icon name="delete" size="40" color="#F95A5A" @click="handleDelete(item)"></fui-icon>
        </view>
      </view>
    </view>
    <view class="page-footer ui-fixed-footer ui-fixed-footer__white">
      <fui-text class="activity-goods-count" :text="`活动商品：${goodsList.length}个`" size="28" color="#333"></fui-text>
      <fui-button v-if="!activityId" class="ui-btn-danger_plain" text="全部删除" width="180rpx" height="78rpx" radius="39rpx" size="28" @click="handleDelete()"></fui-button>
      <fui-button class="ui-btn-primary_plain" text="添加商品" width="180rpx" height="78rpx" radius="39rpx" size="28" @click="tab.navigateTo(addLink)"></fui-button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import utils from '@/components/firstui/fui-utils'
import activityApi from '@/api/activity/supplier'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

const activityId = ref('')
const isForm = ref('')
const goodsList = ref([])

const addLink = computed(() => `/pages/activity/supplier/selectGoods?activityId=${activityId.value}&isForm=${isForm.value}`) // 添加商品

onLoad(option => {
  activityId.value = option.activityId
  isForm.value = option.isForm
})

onShow(() => {
  if (activityId.value) {
    getGoodsList()
  } else {
    goodsList.value = store.getters.activityGoods
  }
})

// 活动商品
const getGoodsList = () => {
  modal.loading('加载中...')
  try {
    activityApi.getCheckedGoodsList(activityId.value).then((res) => {
      if(res.code === 0){
        goodsList.value = (res.data || []).map((item) => {
          return {
            ...item,
            imgUrl: item.sliderPicUrls ? item.sliderPicUrls[0] : JSON.parse(item.picUrl)[0]
          }
        })
        store.commit('SET_ACTIVITY_GOODS', goodsList.value)
        modal.closeLoading()
      } else{
        modal.msgError(res.msg)
      }
    })
  } catch(err){
    modal.closeLoading()
    modal.msgError(err)
  }
}

// 移除商品
const handleDelete = (row) => {
  const allCheckedGoodsArr = row ? goodsList.value.filter(item => item.id !== row.id) : []
  const allCheckedGoodsIds = allCheckedGoodsArr.map(item => item.id)
  if (activityId.value && !allCheckedGoodsIds.length) {
    modal.msgError('至少保留一件商品！')
    return
  }
  const deleteTips = row ? `确认移除商品【${row.name}】？` : '确认移除全部商品？'
  modal.confirm(deleteTips).then(() => {
    if (activityId.value) {
      activityApi.updateActivityGoods({
        id: activityId.value,
        productSpuIds: allCheckedGoodsIds.join(',')
      }).then(res => {
        if (res.code === 0) {
          getGoodsList()
        }
      })
    } else {
      store.commit('SET_ACTIVITY_GOODS', allCheckedGoodsArr)
      goodsList.value = store.getters.activityGoods
    }
  })
}
</script>

<style lang="scss" scoped>
.page-activity-goods {
  padding: 42rpx 36rpx 186rpx;
  .page-content {
    .goods-list {
      padding-bottom: 15rpx;
      .goods-item {
        display: flex;
        align-items: center;
        width: 100%;
        background: #ffffff;
        border-radius: 16rpx;
        padding: 28rpx;
        box-sizing: border-box;
        margin-bottom: 30rpx;

        .goods-item-right {
          margin-left: 24rpx;
          width: calc(100% - 188rpx);
          .right-title {
            font-size: 28rpx;
            font-weight: bold;
            color: #333333;
            margin-bottom: 16rpx;
          }
          .right-list {
            display: flex;
            flex-wrap: wrap;
            .right-text {
              width: 100%;
              font-size: 24rpx;
              font-weight: 400;
              color: #999999;
              display: flex;
              align-items: center;
              margin-bottom: 10rpx;

              image {
                padding-right: 10rpx;
              }

              span {
                color: #333333;
              }
              .right-number {
                font-weight: bold;
                color: #2c83fc;
                padding: 0 10rpx;
              }
            }
          }
        }
      }
    }
  }
  .page-footer {
    display: flex;
    align-items: center;
    height: 130rpx;
    box-shadow: 0 0 6px rgb(0 0 0 / 12%);
    padding: 0 36rpx;
    .activity-goods-count {
      flex: 1;
    }
    .fui-button__wrap {
      margin-left: 20rpx !important;
    }
  }
}
</style>